<template>
  <div class="read_management">
    <div style="width: 550px">
      <el-dialog title="读者创建" :visible.sync="dialogFormVisible" center="true" width="550px">
        <el-form :model="form">
          <div style="width: 400px">
            <el-form-item label="姓名" :label-width="formLabelWidth">
              <el-input v-model="form.name" autocomplete="off" />
            </el-form-item>
          </div>
          <div style="width: 400px">
            <el-form-item label="联系方式" :label-width="formLabelWidth">
              <el-input v-model="form.contact" autocomplete="off" />
            </el-form-item>
          </div>
          <div style="width: 400px">
            <el-form-item label="用户名" :label-width="formLabelWidth">
              <el-input v-model="form.username" autocomplete="off" />
            </el-form-item>
          </div>
          <div style="width: 400px">
            <el-form-item label="密码" :label-width="formLabelWidth">
              <el-input v-model="form.password" autocomplete="off" />
            </el-form-item>
          </div>
        </el-form>
        <div slot="footer" class="dialog-footer" style="text-align: center">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <div style="margin: 5px 25px">
      <el-card>
        <el-header>
          <el-row style="padding-top: 10px">
            <el-input
              v-model="search"
              placeholder="请输入读者证号"
              prefix-icon="el-icon-search"
              size="medium"
              style="width: 80%"
            />
            <el-button style="margin-left: 10px" type="primary">搜索</el-button>
            <el-button type="plain" @click="dialogFormVisible = true">添加读者</el-button>
          </el-row>
        </el-header>
      </el-card>
      <el-card style="margin-top: 10px">
        <el-main>
          <el-table
            :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
            :default-sort="{prop: 'read_number', order: 'descending'}"
          >
            <el-table-column
              prop="number"
              label="读者证号"
              sortable
            />
            <el-table-column
              prop="name"
              label="姓名"
            />
            <el-table-column
              prop="level"
              label="等级"
              sortable
            />
            <el-table-column
              prop="contact"
              label="联系方式"
            />
            <el-table-column
              prop="state"
              label="状态"
            />
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="primary"
                  @click="handleEdit(scope.$index, scope.row)"
                >编辑</el-button>
                <el-button
                  size="mini"
                  type="plain"
                  @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-main>
      </el-card>
    </div>
    <div class="block">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        @current-change="current_change"
      />
    </div>
  </div>
</template>

<script>
import { getReader } from '@/api/user'

export default {
  name: 'ReadManagement',

  data() {
    return {
      total: 0,
      pageSize: 5,
      currentPage: 1,
      search: '',
      tableData: [],
      dialogFormVisible: false,
      form:
        {
          name: '',
          gender: '',
          contact: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
      formLabelWidth: '120px'
    }
  },
  created() {
    this.getData()
  },
  methods: {
    handleClick(row) {
      console.log(row)
    },
    current_change: function(currentPage) {
      this.currentPage = currentPage
    },
    getData() {
      getReader().then(response => {
        this.tableData = response
      }).catch(error => {
        console.log(error)
      })
    }
  }
}
</script>

<style scoped>
  .read_management {
    padding: 32px;
    background-color: rgb(240, 242, 245);
    position: relative;
  }
</style>
